<template>
  <div class="container">
    <el-row>
      <el-col :span="6">
        <el-row>
          <el-select
            v-model="selectedCompanyId"
            placeholder="请选择公司"
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in companyList"
              :key="index"
              :label="item.ccompany"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-row>
        <el-row class="border">
          <template v-if="!companyDepTreeLoading">
            <el-tree
              :data="companyDepTree"
              :expand-on-click-node="false"
              highlight-current
              node-key="id"
              :indent="32"
              default-expand-all
              @node-click="handleSelectCompany"
            >
            </el-tree>
          </template>

          <template v-else>
            <i class="el-icon-loading"></i> 树形计算中...
          </template>
        </el-row>
      </el-col>
      <el-col :span="12" :offset="1">
        <el-row>
          <el-button
            v-show="hasAdd"
            icon="el-icon-plus"
            size="small"
            type="success"
            @click="hadnleOpenAdditWindow"
          >
            新增下属部门
          </el-button>
          <el-button
            v-show="hasUpdate"
            icon="el-icon-edit"
            size="small"
            type="primary"
            @click="handleOpenEditorWindow"
          >
            修改
          </el-button>

          <el-button
            v-show="hasDelete"
            icon="el-icon-delete"
            size="small"
            type="danger"
            @click="handleDeleteDepartment"
          >
            删除
          </el-button>
        </el-row>
        <el-row class="border">
          <org-detail :data="detail" :is-company="isCompany"></org-detail>
        </el-row>
      </el-col>
    </el-row>

    <el-dialog title="📝修改" :visible.sync="editor.show" width="50%">
      <org-form
        ref="editorForm"
        :data="editor.target"
        @submit="handleSubmitEditorForm"
      ></org-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editor.show = false">取消</el-button>
        <el-button type="primary" @click="handleCheckEditorForm">
          确定
        </el-button>
      </span>
    </el-dialog>

    <el-dialog title="📝修改" :visible.sync="addit.show" width="50%">
      <org-form
        ref="additForm"
        :data="addit.target"
        @submit="handleSubmitAdditForm"
      ></org-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addit.show = false">取消</el-button>
        <el-button type="primary" @click="handleCheckAdditForm">
          确定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent } from "@vue/composition-api";
import {
  useCompanyData,
  useDetail,
  useEditor,
  useAddit,
  handleDeleteDepartment,
} from "./states";
import OrgDetail from "./OrgDetail.vue";
import OrgForm from "./OrgForm.vue";
import { hasOrgPermission } from "./perm";
import { Message } from "element-ui";

export default defineComponent({
  components: { OrgDetail, OrgForm },
  setup() {
    const { hasAdd, hasUpdate, hasDelete, hasSelect } = hasOrgPermission();

    if (hasSelect === false) {
      Message.warning("您对该页面没有查询权限...");
    }

    const {
      selectedCompanyId,
      companyList,
      companyDepTree,
      companyDepTreeLoading,
    } = useCompanyData();

    const { detail, isCompany, handleSelectCompany } = useDetail();

    const {
      editor,
      handleOpenEditorWindow,
      handleCheckEditorForm,
      handleSubmitEditorForm,
    } = useEditor();

    const {
      addit,
      hadnleOpenAdditWindow,
      handleCheckAdditForm,
      handleSubmitAdditForm,
    } = useAddit();

    return {
      // states
      companyList,
      selectedCompanyId,
      companyDepTree,
      companyDepTreeLoading,
      detail,
      isCompany,
      editor,
      addit,

      // methods
      handleSelectCompany,
      handleOpenEditorWindow,
      handleCheckEditorForm,
      handleSubmitEditorForm,
      hadnleOpenAdditWindow,
      handleCheckAdditForm,
      handleSubmitAdditForm,
      handleDeleteDepartment,

      // permission
      hasAdd,
      hasUpdate,
      hasDelete,
    };
  },
});
</script>

<style scoped>
.container {
  padding-left: 20px;
  padding-top: 20px;
}

.border {
  margin-top: 15px;
  border: solid #bbb 1px;
  padding: 10px;
}
</style>
